<template>
	<view class="content">
		<view class="content_line">
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>

			<view class="context_view">
				<view style="display: flex;">
					<text style="height: 80rpx;line-height: 80rpx; font-size: 32rpx;color: #666666;">商户名称：</text>
					<input
						@input="messagesearch"
						placeholder="请输入店名"
						placeholder-class="inputCaptainStyle"
						style="width: 435rpx;height: 80rpx;background-color: #DCDCDC;padding-left: 15rpx;font-size: 28rpx;color: #6D6D6D;
					border-radius: 10rpx;border-style: solid;border-width: 1px;border-color: #b5b5b5;"
					/>
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<text style="height: 80rpx;line-height: 80rpx; font-size: 32rpx;color: #666666;">店铺地址：</text>
					<input
						@click="getAddr"
						:value="addrValue"
						@input="messageAddrSearch"
						placeholder="请选择店铺地址"
						placeholder-class="inputCaptainStyle"
						style="width: 435rpx;height: 80rpx;background-color: #DCDCDC;padding-left: 15rpx;font-size: 28rpx;color: #6D6D6D;
					border-radius: 10rpx;border-style: solid;border-width: 1px;border-color: #b5b5b5;"
					/>
				</view>
				<view
					@click="putContext"
					style="width: 530rpx;height: 75rpx;background-color: #3ab54a;border-radius: 10rpx;font-size: 32rpx;color: #e8dccc;
				text-align: center;line-height: 75rpx;margin-top: 50rpx;"
				>
					确认提交
				</view>
			</view>

			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nameValue: '',
			addrValue: ''
		};
	},
	methods: {
		messagesearch(event) {
			this.nameValue = event.target.value;
		},
		messageAddrSearch(event) {
			this.addrValue = event.target.value;
		},
		putContext() {
			console.log(this.nameValue);
			console.log(this.addrValue);

			uni.showLoading({
				title: '正在提交'
			});

			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.get('/api/v1/applyUpMerchants', {
					data: {
						nameValue: that.nameValue,
						addrValue: that.addrValue
					},
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: res.data.data,
						icon: 'none'
					});
					
					if(res.data.code == '501'){
						return;
					}
					
					setTimeout(function() {
						uni.navigateBack({});
					}, 1500);
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});
		},
		getAddr() {
			let that = this;
			uni.chooseLocation({
				success: function(res) {
					console.log('详细地址：' + res.address);
					that.addrValue = res.address;
				},
				fail: function(err) {
					console.log('地图调用失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6dcc8;
}

.content_line {
	width: 690rpx;
	height: 95%;
	border-style: solid;
	border-width: 7rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_rt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_lb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.content_rb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/deep/.inputCaptainStyle {
	font-size: 26rpx;
	color: #6d6d6d;
}
</style>
